<template>
    <section>
        <el-col :span="24">
            <el-button type="info" class="el-icon-delete" size="small" plain :disabled="selectData.length==0" @click="delBtn">
                删除
            </el-button>
            <el-button type="info" class="el-icon-search" size="small" plain @click="openMaterielBtn">
                选择物料
            </el-button>
            <el-table :data="bomData" ref="materialTable" class="material-table-box" style="width: 100%;margin-top: 2px;" :max-height="height-32" :cell-style="cellStyle"
                      :header-cell-style="headerCellStyle" @selection-change="selectionChange" border size="mini">
                <el-table-column type="selection" align="center" width="50"></el-table-column>
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="img" label="图片" width="50" align="center">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.img" :src="scope.row.img" style="height: 30px;" :preview-src-list="[scope.row.img]" fit="contain"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="materiel_major_category" label="物料类型" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column prop="materiel_minor_category" label="物料分类" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column prop="materiel_number" label="物料编码" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="materiel" label="物料名称" width="160" show-overflow-tooltip></el-table-column>
                <el-table-column prop="comment" label="备注" width="180" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <el-input v-model.trim="row.comment" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="part" label="部位" width="80" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-input v-model.trim="row.part" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="materiel_attribute" width="200" label="属性">
                    <template slot-scope="scope">
                        <div class="ellipsis" style="width: 100%;height:27px;display: flex;font-size: 11px;cursor: pointer" @click="openAttributeBtn(scope.$index)">
                            <div v-for="(item, index) in JSON.parse(scope.row.materiel_attribute)" :key="index" class="attribute-box">
                                <span style="display:block;padding: 1px 2px;background-color: #888080;color: #FFFFFF;">{{ item.name }}</span>
                                <span style="display: block;padding:1px 2px;margin:0 2px">{{ item.value }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!--颜色 单色专用-->
                <el-table-column width="10" show-overflow-tooltip></el-table-column>
                <el-table-column :label="item.colour" v-for="(item, index) in styleColour" :key="index" align="center" width="120">
                    <template slot-scope="scope">
                        <div style="width: 100%;height: 20px" @mouseenter="activeColorBtn(scope.$index)" @mouseleave="activeColorBtn('')">
                            <div class="color-edit-box" v-if="selectIndex===scope.$index">
                                <el-button type="text" class="el-icon-edit" size="mini" style="color: white" @click="openColourBtn(item.id, scope.$index)"></el-button>
                                <el-button type="text" class="el-icon-delete" size="mini" style="color: white" @click="clearColorBtn(item.id, scope.$index)"></el-button>
                                <el-button type="text" class="el-icon-remove-outline" size="mini" style="color: white" @click="moveColorBtn(item.id, scope.$index)"></el-button>
                            </div>
                            <div :style="colorStyle(scope.row, item.id)">
                                {{ scope.row | colourValue(item.id) }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="materiel_major_unit" label="单位" width="55" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="material_details" label="用料详情" width="145">
                    <template slot-scope="{ row }">
                        <div>
                            单耗：
                            <el-input :min="0" placeholder="0" v-model.trim="row.style_bom_size_config.amount" size="mini" style="width: 80px" type="number"></el-input>
                        </div>
                        <div v-if="row.materiel_major_unit=='条'" style="margin-top: 4px;">
                            {{row.style_bom_size_config.content[4].name || "长度(cm)"}}：
                            <el-input :min="0" placeholder="0" v-model.trim="row.style_bom_size_config.content[4].value" size="mini" style="width: 58px" type="number"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="开发单价" width="90" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-input :min="0" placeholder="0" v-model.trim="row.price" size="mini" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="缩水率(%)" width="200">
                    <template slot-scope="{row}">
                        <div v-if="detail.state<3">
                            经：<el-input v-model.trim="row.style_bom_size_config.material_sr_e" size="mini" type="number" style="width: 60px" placeholder="请输入"></el-input>
                            纬：<el-input v-model.trim="row.style_bom_size_config.material_sr_w" size="mini" type="number" style="width: 60px" placeholder="请输入"></el-input>
                        </div>
                        <div v-else>
                            <span>经：{{row.style_bom_size_config.material_sr_e}}</span>&nbsp;
                            <span>纬：{{row.style_bom_size_config.material_sr_w}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="supplier" label="供应商" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="text" class="el-icon-search" @click="openFactoryBtn(scope.$index)"></el-button>
                        {{scope.row.supplier}}
                    </template>
                </el-table-column>
                <el-table-column prop="supplier_contact_name" label="联系人" width="70" show-overflow-tooltip></el-table-column>
                <el-table-column prop="supplier_phone" label="联系方式" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="supplier_address" label="地址" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column></el-table-column>
            </el-table>
        </el-col>

        <!--选择物料-->
        <el-dialog title="选择物料" :visible.sync="materielVisible" top="10px" :close-on-click-modal="false" width="1200px">
            <el-row>
                <el-form inline>
                    <el-form-item>
                        <el-input v-model="materielForm.name" placeholder="物料名称" style="width: 150px;" clearable size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="materielForm.number" placeholder="物料编码" style="width: 150px;" clearable size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" @click="getMaterielData" size="small" :loading="btnLoading">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="materielList" style="width: 100%" max-height="400px" ref="materielTable" v-loading="btnLoading" size="mini"
                          @selection-change="selectionMaterielChange" :header-cell-style="{ background: '#F3F4F7', color: '#555' }" border>
                    <el-table-column type="selection" align="center" width="50"></el-table-column>
                    <el-table-column prop="img" label="图片" width="50">
                        <template slot-scope="{row}">
                            <el-image v-if="row.img" :src="row.img" fit="contian" :preview-src-list="[row.img]" ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="物料编码" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="物料名称" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="materiel_major_category_name" label="物料类型" width="90"></el-table-column>
                    <el-table-column prop="materiel_category_type" label="物料分类" width="120">
                        <template slot-scope="{row}">
                            {{row.materiel_category_type}}
                            <el-tag size="mini" v-if="attributeMap[row.materiel_attribute_id]">{{attributeMap[row.materiel_attribute_id]['name']}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="materiel_major_unit_name" label="单位" width="70"></el-table-column>
                    <el-table-column prop="materiel_attribute" label="属性" width="405">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" style="width: 100%;height:27px;display: flex;font-size: 11px;">
                                <div v-for="(item, index) in JSON.parse(row.materiel_attribute)" :key="index" class="attribute-box">
                                    <span style="display:block;padding: 1px 2px;background-color: #888080;color: #FFFFFF;">{{ item.name }}</span>
                                    <span style="display: block;padding:1px 2px;margin:0 2px">{{ item.value }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column></el-table-column>
                </el-table>
            </el-row>
            <div slot="footer">
                <el-button @click="materielVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveMaterielBtn" size="small" :disabled="selectMaterielData.length==0">确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑物料属性-->
        <el-dialog title="编辑物料属性" :visible.sync="attributeVisible" top="10px" :close-on-click-modal="false" width="350px">
            <el-row v-if="this.attributeMap[this.attributeForm.materiel_attribute_id]">
                <div v-for="(detailItem, index) in this.attributeMap[this.attributeForm.materiel_attribute_id].detail" :key="index" v-if="detailItem.type=='NORMAL'"
                    style="margin-bottom: 20px">
                    <span style="display: inline-block;text-align:right;width: 90px;font-weight: bold;margin-right:10px;" :class="{'star':detailItem.category=='CUSTOM'}">
                        {{detailItem.name}}：
                    </span>
                    <template v-if="detailItem.category=='PRIMARY'">
                        <span>{{attributeForm.materiel_attribute[detailItem.id].value || ""}}</span>
                    </template>
                    <template v-else>
                        <el-input v-if="detailItem.inputType == 'TEXT'" v-model.trim="attributeForm.materiel_attribute[detailItem.id].value" size="small"
                                  :placeholder="'输入'+detailItem.name" style="width:200px" clearable></el-input>
                        <el-input-number v-else-if="detailItem.inputType == 'NUMBER'" v-model="attributeForm.materiel_attribute[detailItem.id].value" size="small"
                                         :placeholder="'输入'+detailItem.name" controls-position="right" style="width:200px"></el-input-number>
                        <el-select v-else-if="detailItem.inputType == 'LIST'" v-model="attributeForm.materiel_attribute[detailItem.id].value"
                                   size="small" placeholder="无" style="width: 200px" clearable>
                            <el-option v-for="(v, i) in detailItem.value" :key="i" :value="v" :label="v"></el-option>
                        </el-select>
                        <el-radio-group v-else-if="detailItem.inputType == 'BOOL'" v-model="attributeForm.materiel_attribute[detailItem.id].value">
                            <el-radio label="true">是</el-radio>
                            <el-radio label="false">否</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group>
                    </template>
                </div>
            </el-row>
            <div slot="footer">
                <el-button @click="attributeVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveAttributeBtn" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <!--选择物料颜色-->
        <el-dialog title="选择物料颜色" :visible.sync="colourVisible" top="10px" :close-on-click-modal="false" width="500px">
            <el-form label-width="100px" @submit.native.prevent label-position="left">
                <el-form-item label="是否分色">
                    <el-switch v-model="colourForm.is_normal" active-text="通用" inactive-text="分色"></el-switch>
                </el-form-item>
                <el-form-item label="物料颜色">
                    <el-input v-model.trim="colourForm.value" size="small" placeholder="物料颜色（必填）" clearable></el-input>
                </el-form-item>
                <el-form-item label="色值录入">
                    <el-input v-model.trim="colourForm.code_ch" size="small" placeholder="色值录入" clearable></el-input>
                </el-form-item>
                <el-form-item label="颜色展示">
                    <el-color-picker v-model="colourForm.code_ch"></el-color-picker>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="colourVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveColourBtn" size="small" :disabled="!colourForm.code_ch || !colourForm.value">确 定</el-button>
            </div>
        </el-dialog>

        <!--选择供应商-->
        <el-dialog title="选择供应商" :visible.sync="factoryVisible" top="10px" :close-on-click-modal="false" width="900px">
            <el-row>
                <el-form inline>
                    <el-form-item>
                        <el-input v-model.trim="factoryForm.name" size="small" style="width:140px;" placeholder="工厂名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" @click="getFactoryData" size="small" :loading="btnLoading">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="factoryData" style="width: 100%" class="factory-table-box" max-height="400px" size="mini" highlight-current-row @current-change="factorySelected">
                    <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                    <el-table-column label="工厂编码" align="center" prop="supplier_id" show-overflow-tooltip></el-table-column>
                    <el-table-column label="工厂名称" prop="factory_name" width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column label="简称" prop="factory_name_jiancheng" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column label="法人代表/联系人" prop="legal_person" show-overflow-tooltip></el-table-column>
                    <el-table-column label="联系电话" prop="contact_phone" show-overflow-tooltip></el-table-column>
                    <el-table-column label="联系地址" prop="contact_address" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-row>
            <div slot="footer">
                <el-button @click="factoryVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveFactoryBtn" size="small" :disabled="selectedFactoryData.length==0">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {getBgColor, setColor} from "../../../libs/tools";
import {factoryList} from "../../../api/produce/factory";
import {materielList} from "../../../api/bs/materiel";

export default {
    name: "designBomEd",
    props: {
        detail: {
            type: Object,
            default: {}
        },
        attributeMap: {
            type: Object,
            default: {}
        },
        bomData: {
            type: Array,
            default: []
        },
        styleColour:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            tableHeight: window.innerHeight,
            selectIndex: "",
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],

            material_sr_index: 0,
            material_sr_edit: false,
            material_sr_e: "", //"缩水率 经"
            material_sr_w: "", //"缩水率 纬"
            material_sr_width:165,

            selectData: [],
            selectMaterialIndex: "",

            factoryVisible: false,
            factoryForm: {name: ""},
            factoryData: [],
            selectedFactoryData: [],

            colourVisible: false,
            colourForm: {styleColourId: "", is_normal: false},

            attributeVisible: false,
            attributeForm: {},

            materielVisible: false,
            materielForm: {name: "", number: ""},
            materielList: [],
            selectMaterielData: [],
        }
    },
    filters: {
        toFixedTwo(e) {
            return Number(e).toFixed(3);
        },
        colourValue(row, colourId) {
            if (row.style_bom_colour_config[colourId]) {
                if(row.style_bom_colour_config[colourId][0]){
                    return row.style_bom_colour_config[colourId][0].value;
                }
                return "";
            }else{
                return "—";
            }
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        headerCellStyle({ column }) {
            let { styleColour } = this;
            let index = styleColour.map((e) => e.colour).indexOf(column.label);
            if (index != -1) {
                let bgcolor = Number(styleColour[index].colour_value).toString(16);
                bgcolor = bgcolor.length >= 6 ? bgcolor : bgcolor.padStart(6, "0");
                let color = getBgColor(styleColour[index].colour_value)
                return {
                    background: "#" + bgcolor,
                    color
                };
            }
            return { background: "#F3F4F7", color: "#555" };
        },
        cellStyle(row, rowIndex) {
            if (row.columnIndex == 10 && row.row.materiel_major_category == "主料") {
                return {background: "red"};
            }
        },
        colorStyle(row, colourId) {
            if (row.style_bom_colour_config[colourId]) {
                if(row.style_bom_colour_config[colourId][0]){
                    let color = getBgColor(row.style_bom_colour_config[colourId][0].code);
                    return {
                        "height": "20px",
                        "background-color": row.style_bom_colour_config[colourId][0].code_ch,
                        color,
                        "text-align": "center"
                    };
                }
                return {};
            }else{
                return {
                    "color": "red",
                    "text-align": "center"
                };
            }
        },
        closeBtn(){
            this.printVisible = false;
        },
        selectionChange(rows) {
            // 获取选中行的索引（可选）
            this.selectData = rows.map(item => this.bomData.findIndex(row => row === item));
            this.selectData = this.selectData.sort((a, b) => b-a);
        },
        //删除
        delBtn(index){
            this.$confirm(`删除选中的物料, 是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.selectData.forEach(index => {
                    this.bomData.splice(index, 1);
                })
            }).catch(() => {

            })
        },

        //选择供应商
        openFactoryBtn(index){
            this.selectMaterialIndex = index;
            this.factoryVisible = true;
        },
        //选中供应商
        factorySelected(val){
            this.selectedFactoryData = [val];
        },
        getFactoryData(){
            factoryList({page: 1, limit: 30, factory_name: this.factoryForm.name, tab: 8}).then((res) =>{
                this.factoryData = res.data.data;
            })
        },
        //保存供应商
        saveFactoryBtn(){
            this.$set(this.bomData[this.selectMaterialIndex], 'supplier_id', this.selectedFactoryData[0].id);
            this.$set(this.bomData[this.selectMaterialIndex], 'supplier', this.selectedFactoryData[0].factory_name);
            this.$set(this.bomData[this.selectMaterialIndex], 'supplier_contact_name', this.selectedFactoryData[0].legal_person);
            this.$set(this.bomData[this.selectMaterialIndex], 'supplier_phone', this.selectedFactoryData[0].contact_phone);
            this.$set(this.bomData[this.selectMaterialIndex], 'supplier_address', this.selectedFactoryData[0].contact_address);
            this.factoryVisible = false;
        },
        activeColorBtn(index){
            this.selectIndex = index;
        },
        clearColorBtn(styleColorId, index){
            let obj = {};
            obj[styleColorId] = [];
            this.$set(this.bomData[index], 'style_bom_colour_config', obj);
            console.log("清空颜色", this.bomData[index])
        },
        moveColorBtn(styleColorId, index){
            if(!!this.bomData[index]['style_bom_colour_config'][styleColorId]){
                delete this.bomData[index]['style_bom_colour_config'][styleColorId];
            }
            console.log("删除颜色", this.bomData[index])
        },
        openColourBtn(styleColorId, index){
            this.selectMaterialIndex = index;
            let colourForm = {styleColourId: styleColorId, is_normal: false};
            if(!!this.bomData[this.selectMaterialIndex]['style_bom_colour_config'][styleColorId]){
                if(this.bomData[this.selectMaterialIndex]['style_bom_colour_config'][styleColorId][0]){
                    colourForm = Object.assign(JSON.parse(JSON.stringify(this.bomData[this.selectMaterialIndex]['style_bom_colour_config'][styleColorId][0])), colourForm);
                }
            }else{
                //this.$set(this.bomData[this.selectMaterialIndex]['style_bom_colour_config'], styleColorId, []);
            }
            this.colourForm = colourForm;
            this.colourVisible = true;
        },
        saveColourBtn(){
            this.colourForm.code = setColor(this.colourForm.code_ch);
            if(this.colourForm.is_normal){//颜色通用
                this.styleColour.forEach(item => {
                    //this.bomData[this.selectMaterialIndex]['style_bom_colour_config'][item.id] = [this.colourForm];
                    this.$set(this.bomData[this.selectMaterialIndex]['style_bom_colour_config'], item.id, [this.colourForm]);
                });
            }else{
                //this.bomData[this.selectMaterialIndex]['style_bom_colour_config'][this.colourForm.styleColourId] = [this.colourForm];
                this.$set(this.bomData[this.selectMaterialIndex]['style_bom_colour_config'], this.colourForm.styleColourId, [this.colourForm]);
            }
            this.colourVisible = false;
            console.log("物料颜色", this.bomData[this.selectMaterialIndex]['style_bom_colour_config']);
        },
        //编辑物料属性窗口
        openAttributeBtn(index){
            this.selectMaterialIndex = index;
            let row = this.bomData[index];
            this.attributeVisible = true;
            let materielAttribute = JSON.parse(row.materiel_attribute);
            if(Array.isArray(materielAttribute) && materielAttribute.length == 0){
                materielAttribute = {};
            }
            this.attributeMap[row.materiel_attribute_id].detail.forEach(item => {
                if(!materielAttribute[item.id]){
                    materielAttribute[item.id] = {name: item.name};
                }
            })
            this.attributeForm = {
                materiel_attribute_id: row.materiel_attribute_id,
                materiel_attribute: JSON.parse(JSON.stringify(materielAttribute))
            };
        },
        //保存物料属性
        saveAttributeBtn(){
            let materielAttribute = {};
            Object.keys(this.attributeForm.materiel_attribute).forEach(key => {
                if(!!this.attributeForm.materiel_attribute[key].value){
                    materielAttribute[key] = this.attributeForm.materiel_attribute[key];
                }
            });
            this.$set(this.bomData[this.selectMaterialIndex], 'materiel_attribute', JSON.stringify(materielAttribute));
            this.attributeVisible = false;
        },
        //选择物料
        openMaterielBtn(){
            //this.getMaterielData();
            this.materielVisible = true;
        },
        getMaterielData(){
            this.btnLoading = true;
            materielList({page: 1, limit: 20, name: this.materielForm.name, number: this.materielForm.number}).then((res) => {
                this.btnLoading = false;
                this.materielList = res.data.data;
            });
        },
        selectionMaterielChange(rows){
            this.selectMaterielData = rows;
        },
        saveMaterielBtn(){
            let position = this.bomData.length > 0 ? this.bomData[this.bomData.length-1].position+1 : 1;
            let colourConfig = {};
            this.styleColour.forEach(item => {
                colourConfig[item.id] = [];
            });
            this.selectMaterielData.forEach(item => {
                this.bomData.push({
                    position: position,
                    materiel_id: item.id,
                    img: item.img,
                    is_product: 1,
                    materiel: item.name,
                    materiel_attribute: item.materiel_attribute,
                    materiel_attribute_id: item.materiel_attribute_id,
                    materiel_major_category: item.materiel_major_category_name,
                    materiel_major_category_id: item.materiel_major_category_id,
                    materiel_major_unit: item.materiel_major_unit_name,
                    materiel_major_unit_id: item.materiel_major_unit_id,
                    materiel_minor_category: item.materiel_category_type,
                    materiel_minor_category_id: item.materiel_category_id,
                    materiel_number: item.number,
                    part: "",
                    price: 0,
                    style_bom_colour_config: colourConfig,
                    style_bom_size_config:{
                        amount: 0,
                        content: item.materiel_major_unit_name=='条' ? {4: {name: "长度(cm)", value: 0}} : {},
                        material_sr_e: 0,
                        material_sr_w: 0
                    },
                    style_id: this.detail.id,
                    supplier: "",
                    supplier_address : "",
                    supplier_contact_name: "",
                    supplier_id: 0,
                    supplier_phone: ""
                });
            });
            this.materielVisible = false;
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}

@page {
    size: auto;
    margin: 0;
}
/**自动分页**/
@media print {
    .page-break {
        padding-top: 30px;
        page-break-after: always;
    }
}

#printMe{
    width: 1100px;
    margin-left: 40px;
}
#printMe table, th, td {
    border: 1px solid #909399;
    border-collapse: collapse; /* 移除单元格之间的间隔 */
    padding: 6px;
}

.page-break {
    margin-bottom: 60px;
}
.factory-table-box /deep/ .el-table__body tr.current-row>td{
    background-color: #ff635840;
}

.material-table-box /deep/ .el-input__inner {
    padding: 0 0 !important;
    border: none !important;
}

.color-edit-box{
    position: absolute;
    right: 0;
    width: 90px;
    height: 20px;
    line-height: 20px;
    background-color: #000000b0;
}
.attribute-box{
    display: flex;
    align-items: center;
    border-radius: 4px;
    background-color: #f4f4f4;
    margin-right:2px;
    border: 1px solid #888080;
}
.star::before {
    content: "* ";
    color: #F56C6C;
}
</style>
